<!DOCTYPE html>
{%load staticfiles%}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="{% static 'css/trash.css' %}" rel="stylesheet" type="text/css" />
    <style>
        .hlong *{display:inline-block;vertical-align: middle }
        #allmap{width:600px;height:600px;}
    </style>
</head>
<body>
<h1 style="color: white;margin-left: 1%;font-size: 50px">垃圾桶智能检测微场景</h1>
<div id="allmap" style="position:absolute;left: 120px;top:236px"></div>
<div id="time" class="hlong" style="position: absolute;right: 20px;top: 10px;width: 460px">
    <img src="{% static 'trashimage/time.png' %}" style="height: 40px;width: 40px">
    <span style="color: white;font-size: 35px;">{% verbatim %} {{dates}} {% endverbatim %}</span>
</div>
<div id="app">
    <div>
    <img :src="fullimage[fullindex]" alt="" style="height: 200px;width: 200px;position: absolute;left: 1416px;top: 236px" >
    <img :src="fireimage[fireindex]" alt="" style="height: 200px;width: 200px;position: absolute;left: 1416px;top: 436px"  >
    <img :src="fallimage[fallindex]" alt="" style="height: 200px;width: 200px;position: absolute;left: 1416px;top: 636px" >
    </div>
    <div>
        <p style="color:white;position: absolute;left: 900px;top: 248px;font-size: 32px">装载情况：{% verbatim %} {{fullstute[fullindex]}} {% endverbatim %}</p>
        <p style="color:white;position: absolute;left: 900px;top: 318px;font-size: 32px">距离：{% verbatim %} {{ distance }} {% endverbatim %}mm</p>
        <p style="color:white;position: absolute;left: 900px;top: 488px;font-size: 32px">垃圾桶温度：{% verbatim %} {{firestute[fireindex]}} {% endverbatim %}</p>
        <p style="color:white;position: absolute;left: 900px;top: 688px;font-size: 32px">垃圾桶是否倾倒：{% verbatim %} {{fallstute[fallindex]}} {% endverbatim %}</p>
    </div>
    <img :src="batimage[batindex]" alt="" style="height: 60px;width: 60px;position: absolute;top: 7px;right: 490px" >
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8fF825LoEamFjQ5Ab6FTNt4iHtBTcxq0"></script>
<script src="{% static 'js/vue.js' %}"></script>
<script src="{% static 'lib/jquery/jquery.js' %}"></script>
<script src="{% static 'js/trash.js' %}"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                fullimage:["../static/trashimage/bluetrash.png","../static/trashimage/fulltrash.png"],
                fireimage:["../static/trashimage/greentrash.png","../static/trashimage/firetrash.png"],
                fallimage:["../static/trashimage/bluetrash.png","../static/trashimage/falltrash.png"],
                batimage:["../static/trashimage/nomalele.png","../static/trashimage/lowele.png"],
                fullstute:["未满","已满"],
                firestute:["正常","着火"],
                fallstute:["正常","倾倒"],
                fullindex:0,
                fireindex:0,
                fallindex:0,
                batindex:0,
                distance:0,
            }
        },
        methods:{
            refresh: function () {
                $.ajax({
                    url:'/test/',
                    type:'GET',
                    success:(data) => {
                        let obj=eval("(" + data + ")");
                        console.log(data);
                        if (this.fullindex!=obj.full||this.fireindex!=obj.fire||this.fallindex!=obj.fall||this.batindex!=obj.bat||this.distance!=obj.distance) {
                            this.fullindex=obj.full;
                            this.fireindex=obj.fire;
                            this.fallindex=obj.fall;
                            this.batindex=obj.bat;
                            this.distance=obj.distance;
                        }
                    }
                });
        }
        },
        created(){
            this.refresh();
            setInterval(this.refresh,5000)
        }
    });
        new Vue({
        el: "#time",
        data(){
            return{
                dates:'',
            }
        },
        created() {
            var ggPoint = new BMap.Point(114.4147,30.4815);
            var map = new BMap.Map("allmap");
            map.centerAndZoom(ggPoint, 17);
            map.enableScrollWheelZoom();
            map.addControl(new BMap.NavigationControl());
            var marker = new BMap.Marker(ggPoint);// 创建标注
	        map.addOverlay(marker);
            let date=new Date();
            this.dates=date.toLocaleString();
            setInterval(() => {
                date = new Date();
                this.dates=date.toLocaleString();
            }, 1000)
        }
    })
</script>
</body>
</html>
